<template>
    <div style="background-color: #F2F2F2; padding: 20px;">
        <el-row>
            <el-col :span="4">
                <div class="grid-content title-wrapper" style="margin-bottom: 20px;">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>账号信息</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>

        <el-card class="account-card" shadow="hover">
            <div class="avatar-container">
                <el-upload
                        class="avatar-uploader"
                        action="api/user/imgSrcLoad"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                    >

                    <img v-if="administrator.administratorImgSrc" :src="administrator.administratorImgSrc" class="avatar-img">
                    <div v-else class="avatar-placeholder">
                        <i class="el-icon-plus avatar-icon"></i>
                    </div>
                    </el-upload>
            </div>

            <el-form :model="accountForm" label-width="100px" class="account-form">
                <el-form-item label="手机号码">
                    <el-input v-model="administrator.administratorPhone" disabled class="custom-input"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="administrator.administratorName"  class="custom-input"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                    <el-input v-model="administrator.administratorReallyName" disabled class="custom-input"></el-input>
                </el-form-item>
               
                <el-form-item label="邮箱">
                    <el-input v-model="administrator.administratorEmail" class="custom-input"></el-input>
                </el-form-item>
                <el-form-item class="button-group">
                    <el-button type="primary" @click="saveAccountInfo" class="save-btn">
                        <i class="el-icon-check"></i> 保存修改
                    </el-button>
                    <el-button @click="goToHome" class="cancel-btn">
                        <i class="el-icon-close"></i> 取消
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    props: {
        administratorId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            avatarUrl: '',
            administrator: {
            }
        }
    },
    methods: {

        handleAvatarSuccess(resp,file){
            if(resp.code === 200){
                console.log(resp.data);
                this.administrator.administratorImgSrc = resp.data;
            }
        },
     
        saveAccountInfo() {
            // TODO: 实现保存账号信息的逻辑
            if(this.administrator.administratorName === ''|| this.administrator.administratorEmail === '') {
                this.$message.error('请输入用户名和邮箱');
                return;
            }
            this.$axios.post('/api/user/updateAdministrator', this.administrator).then(res => {
                if(res.data.code === 200) {
                    this.$message.success('保存成功');
                    this.$router.push({path:"/index",query:{administratorId:this.administratorId}});
                    this.$emit('transmit', this.administratorId)
                   
                   

                }
            })
        },
        goToHome() {
            this.$router.push('/index');
        },
    },
    created() {
    
        this.administratorId = this.$route.query.administratorId;
        
        this.$axios.get('/api/user/queryAdministratorInfo/'+this.administratorId).then(res => {
            if(res.data.code === 200) {
                this.administrator = res.data.data;
                
            }
        })
    }
}
</script>

<style scoped>
.avatar-img {
        width: 20%;
        height: 20%;
        border-radius: 50%;
        object-fit: cover;
    }
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.account-card {
    max-width: 800px;
    margin: 20px auto;
    border-radius: 8px;
    transition: all 0.3s;
}

.account-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.avatar-container {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    border-radius: 8px;
}

.avatar {
    border: 4px solid #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    margin-bottom: 15px;
}

.upload-btn {
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.3s;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.account-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.custom-input {
    border-radius: 4px;
}

.custom-input :deep(.el-input__inner) {
    border-radius: 4px;
    transition: all 0.3s;
}

.custom-input :deep(.el-input__inner:hover) {
    border-color: #409EFF;
}

.custom-input :deep(.el-input__inner:focus) {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64,158,255,.2);
}

.button-group {
    margin-top: 40px;
    text-align: center;
}

.save-btn, .cancel-btn {
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
}

.save-btn {
    background: linear-gradient(to right, #409EFF, #36a3f7);
    border: none;
    margin-right: 20px;
}

.save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(64,158,255,.3);
}

.cancel-btn {
    background: #f4f4f5;
    border: 1px solid #dcdfe6;
    color: #606266;
}

.cancel-btn:hover {
    background: #e9e9eb;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.el-form-item {
    margin-bottom: 25px;
}

.el-form-item__label {
    font-weight: 500;
    color: #606266;
}
</style> 